<html>
<head>
<link rel="stylesheet" href="demo.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<!--<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>-->
<script src="util.js" type="text/javascript"></script>
<script src="model.js" type="text/javascript"></script>
<script src="view.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
    <script src='libs/jquery/jquery-ui.custom.js' type="text/javascript"></script>
    <script src='libs/jquery/jquery.cookie.js' type="text/javascript"></script>

    <link rel='stylesheet' type='text/css' href='libs/skin/ui.dynatree.css'>
    <script src='libs/jquery.dynatree.js' type="text/javascript"></script>

<script type="text/javascript">
	$(function(){
		var model = new $.Model();
        $("#ui #notes").dynatree({
            onActivate: function(node) {
                // A DynaTreeNode object is passed to the activation handler
                // Note: we also get this event, if persistence is on, and the page is reloaded.
                //alert("You activated " + node.data.title);
                if( node.data.more) {
                    //alert("start from id="+node.data.minId);
                    model.searchNote(null, node.data.minId);
                }
                if( node.data.href ){
					// Open target
					window.open(node.data.href, node.data.target);
                    //window.location.href = node.data.href;
					// or open target in iframe
//                $("[name=contentFrame]").attr("src", node.data.href);
				}
            },
            onExpand: function(flag, node){
                node.visit(function(node){
                    node.expand(true);
                });
            },
            persist: true
        });
		var view = new $.View($("#ui #notes").dynatree("getRoot"));
		var controller = new $.Controller(model, view);
        

	});
</script>
</head>
<body>
	<div id="searchPart" class="flora">
		<form id="searchform" class="contain">
			<input name="terms" class="terms input" autofocus="autofocus"/>
			<input type="button" id="searchButton" value="Search"/>
		</form>
	</div>
	<div id="ui" class="flora">
		<div id="notes" class='contain'>
			<!--<h3>List o' Threads</h3>
            <div id="threadList"/>
			<ul>
			</ul>-->
		</div>
		<form id="addform" class='contain'>
			<h3>Add New Thread</h3>
			<label for="subject">Subject:</label>
			<input name="subject" class="subject input" />
			<br/>
			<div id="inputJSON">
			<label for="subject">JSON:</label>
			<textarea name="body" class="body input" ></textarea>
			</div>
			<div id="htmlView">
			</div>
			<br/>
			<input type="button" id="add" value="Submit"/>
			<input type="button" id="back" value="Back" disabled="true"/>
			<input type="button" id="preview" value="Preview" disabled="true"/>
			
		</form>
		<form id="editform" class='editView'>
			<h3>Preview Thread</h3>
			<div id="editPart">
			<label for="subject">Subject:</label>
			<input type="hidden" id="noteId" />
			<input name="subject" class="subject input" />
			<br/>
			<!--<label for="subject">HTML:</label>-->
			<textarea name="body" class="body input" ></textarea>
			</div>
			<div id="htmlView">
			</div>
			<br/>
			<input type="button" id="update" value="Update" disabled="true"/>
			<input type="button" id="delete" value="Delete" hide="true"/>
			<input type="button" id="cancel" value="Cancel"/>
		</form>
		<div id="console" class='contain'>
			<h3>Console</h3>
		</div>
	</div>
</body>
</html>